<!--Svg动画-->
<template>
  <div>
    <!--    <div class="container">-->
    <!--      <svg width="500" height="200" viewBox="0 0 500 200">-->
    <!--        <rect class="rect" x="5" y="5" width="100" height="50" stroke-width="5" stroke="red" fill="none"></rect>-->
    <!--      </svg>-->
    <!--    </div>-->
    <div class="container">
      <svg width="400" height="400" viewBox="0 0 400 400">
        <circle r="180" cx="200" cy="200" stroke-width="10" stroke="#d1d3d7" fill="none"></circle>
        <circle class="circle" r="180" cx="200" cy="200" stroke-width="10" stroke="skyblue"
                fill="none" transform="matrix(0 -1 1 0 0 400)"></circle>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SvgAnimation',
  setup() {
  }
}
</script>

<style lang="scss" scoped>
.container {
  svg {
    border: 1px solid #000;

  }

  .rect {
    stroke-dasharray: 10 20;
  }

  .circle {
    animation: circle 5s linear infinite;
  }

  @keyframes circle {
    0% {
      stroke-dasharray: 0 1131;
    }
    100% {
      stroke-dasharray: 1131 0;
    }
  }
}
</style>

